<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">
    
        <v-header ref="header"></v-header>

        <hr>
         首页组件   

         <button @click="getChildData()">获取子组件的数据和方法</button>
         <br>
         <button @click="emitNews()">给news组件广播数据</button>

    </div>

</template>
<script>
/*
父组件给子组件传值

    1.父组件调用子组件的时候 绑定动态属性
        <v-header :title="title"></v-header>

    2、在子组件里面通过 props接收父组件传过来的数据
        props:['title']
        props:{

            'title':String      
        }

    3.直接在子组件里面使用

父组件主动获取子组件的数据和方法：

    1.调用子组件的时候定义一个ref

        <v-header ref="header"></v-header>

    2.在父组件里面通过

        this.$refs.header.属性

        this.$refs.header.方法
子组件主动获取父组件的数据和方法：  
        this.$parent.数据
        this.$parent.方法
*/
import VueEvent from '../model/VueEvent.js';
import Header from './Header.vue';
export default {
    data(){
        return{
            msg:'这是一个home组件',
            title:'首页111'
        }
    },
  
    components:{
        'v-header':Header
    },
    methods:{
        run(){
            alert('这是home组件的run方法');
        },
        getChildData(){
            //父组件主动获取子组件的数据和方法；
            //alert(this.$refs.header.msg);
            this.$refs.header.run();
        },
         emitNews(){
            //广播数据
            VueEvent.$emit('to-news',this.msg)
        }
    },
    mounted(){
        //监听news广播的数据 
        VueEvent.$on('to-home',function(data){
            console.log(data);
        })
    }
}
</script>
